
<template>
  <div>
    <van-sticky>
      <div class="back">
        <van-nav-bar
          title="描述病情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          :fixed="true"
          class="title"
        />
      </div>

      <div class="describe">
        <ul>
          <li
            v-for="(step, index) in steps"
            :key="index"
            :class="{ active: index === currentStep }"
          >
            {{ step.title }}
          </li>
        </ul>
        <div v-if="currentStep === 0">
          <!-- 描述病情表单  -->
        </div>
        <div v-if="currentStep === 1">
          <!-- 发送图片表单 -->
        </div>
        <div v-if="currentStep === 2">
       
          <!-- 选择就诊人表单  -->
        </div>
        <div v-if="currentStep === 3">
          <!-- 匹配医生信息  -->
        </div>
      </div>
    </van-sticky>

    <div class="box" v-if="box">
      <div class="bu">
        <img src="../../img/moretalk.jpg" alt="" />
      </div>
      <div class="chat" id="chat-messages">
        <div class="left">
          <div className="zuo" v-for="(item, index) in socketData" :key="index">
            <div class="robot" v-if="item.type === 'server'">
              <img src="../../img/robot.jpg" alt="" />
              <div class="helper">
                <span>智能助手</span>
                <p>{{ item.contents }}</p>
              </div>
            </div>
            <div className="person" v-if="item.type === 'person'">
              <p >{{ item.contents }}</p>
            </div>
          </div>
          
        </div>
        <div  v-for="(messages1, index) in messages1" :key="index">
          <img :src="messages1" alt="" style="width: 100px; height: 100px; border-radius: 0" />
        </div>
        <div class="bottom" v-if="flag">
          <span @click="emojis">
            <img
              style="
                width: 30px;
                height: 30px;
                margin-left: 10px;
                border-radius: 50%;
                margin-top: 20px;
              "
              src="../../image/表情.png"
              alt=""
            />
          </span>
          <input
            id="#bottom-input"
            minlength="10"
            v-model="ipvalue"
            placeholder="请用1-100字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等"
          />
          <button @click="handleSubmit">发送</button>
          <van-action-sheet v-model:show="show6" style="height: 35%">
            <div class="emoji">
              <div v-for="items in emojiObj" :key="items?.name">
                <template v-if="items?.name && items.value?.length">
                  <ul class="default">
                    <li
                      v-for="(item, index) in items.value"
                      :key="index"
                      @click.stop="chooseEmojiDefault(item)"
                      v-html="item"
                    ></li>
                  </ul>
                </template>
              </div>
            </div>
          </van-action-sheet>
        </div>

        <div class="bottom1" v-else v-show="yincang">
          <el-button size="large" round :block="true" @click="showPopup1">暂时没有</el-button>
          <van-popup
            v-model:show="show1"
            closeable
            position="bottom"
            :style="{ height: '25%' }"
            :overlay="false"
          >
            <div class="popupZan">
              <h4>患者档案</h4>
              <van-notice-bar
                left-icon="shield-o"
                :scrollable="false"
                text="真实档案有利于医生准确判断病情，将严格保障您隐私安全"
              />
              <div class="xin">
                <p @click="showPopup2">+新建文档</p>
                <!-- 弹出框 -->
                <van-popup
                  v-model:show="show2"
                  position="bottom"
                  :style="{ height: '50%' }"
                  :overlay="false"
                >
                  <van-nav-bar left-text="新建档案" left-arrow @click-left="onClickLeft1" />
                  <van-notice-bar
                    left-icon="shield-o"
                    :scrollable="false"
                    text="您的信息仅接诊医生可见，春雨医生为您提供隐私保护"
                  />
                  <van-form @submit="onSubmit" v-model="formData">
                    <van-cell-group inset>
                      <van-field
                        v-model="formData.username"
                        label="姓名"
                        placeholder="请输入患者姓名"
                      />
                      <van-field
                        v-model="formData.guanxi"
                        label="与您的关系"
                        placeholder="本人,爱人等"
                      />
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          border-bottom: 1px solid #f5f6f7;
                          padding-bottom: 10px;
                        "
                      >
                        <p style="margin-left: 20px; margin-top: 10px; flex: 1">性别</p>
                        <van-radio-group
                          style="flex: 2"
                          v-model="formData.checked"
                          direction="horizontal"
                        >
                          <van-radio name="1">男</van-radio>
                          <van-radio name="2">女</van-radio>
                        </van-radio-group>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          border-bottom: 1px solid #f5f6f7;
                          padding-bottom: 10px;
                        "
                      >
                        <p style="margin-left: 20px; margin-top: 10px">出生日期</p>
                        <van-field v-model="formData.nyr">{{ formData.nyr }}</van-field>
                        <van-icon name="arrow" @click="riqi" />
                      </div>
                      <van-popup v-model:show="show3" position="bottom" :style="{ height: '45%' }">
                        <van-date-picker
                          v-model="currentDate"
                          title="选择日期"
                          :min-date="new Date(1000, 0, 1)"
                          :max-date="new Date()"
                          @cancel="no"
                          @confirm="yes"
                          ref="getSelectedDate"
                        />
                      </van-popup>
                    </van-cell-group>
                    <div style="margin: 16px">
                      <van-button round block type="success" native-type="submit">提交</van-button>
                    </div>
                  </van-form>
                </van-popup>
              </div>
            </div>
          </van-popup>
          <el-button
            type="success"
            size="large"
            round
            :block="true"
            text="primary"
            @click="showPopup"
          >
            上传图片
          </el-button>
          <van-popup
            v-model:show="show"
            closeable
            position="bottom"
            :style="{ height: '36%' }"
            :overlay="false"
          >
            <div class="popupShang">
              <h4>上传图片(选填)</h4>
              <p>检查单/历史病例/患处照片(最多9张)</p>
              <van-uploader v-model="fileList" multiple :max-count="9" />
              <p>如何正确拍摄清晰照片?查看指南 >></p>
            </div>
            <el-button style="width: 100%; height: 50px" round type="success" @click="goUpload">
              确定
            </el-button>
          </van-popup>
        </div>
      </div>
    </div>
    <div class="box1" v-else>
      <div
        style="
          margin: 10px;
          padding: 10px;
          background: #eeeeee;
          font-size: 13px;
          color: #666666;
          line-height: 25px;
        "
      >
        <!-- 请您仔细阅读 -->
        <span style="color: #63d886; font-size: 13px">《知情同意书》</span>
        <span style="color: #63d886; font-size: 13px">《快速问诊服务说明》</span>
        ，如非复诊，我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
      </div>
      <div>
        <div
          style="
            margin: 0 10px;
            padding: 10px;
            height: 80px;
            display: flex;
            align-items: center;
            background: linear-gradient(to right, #cdf0e2, #ecfaf4);
          "
        >
          <div style="flex: 2.7">
            <p style="font-size: 12px">根据您的病情描述，匹配以下科室医生接诊</p>
            <p style="margin-top: 10px; color: #ffa800; font-weight: bold">
              【
              <span>{{ value2 }}</span>
              】
            </p>
          </div>
          <div style="flex: 1.2; font-size: 12px">
            <van-button icon="discount-o" round plain type="success" size="mini" @click="popupKe">
              重选科室
            </van-button>
          </div>
        </div>
        <!-- 弹框  -->
        <van-popup v-model:show="show5" position="bottom" :style="{ height: '40%' }">
          <van-tree-select
            style="height: 100vh"
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="items"
            @click-item="keshi"
          />
        </van-popup>
        <van-radio-group v-model="checked">
          <div
            style="
              margin: 0 10px;
              padding: 0 10px;
              height: 80px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #eeeeee;
            "
          >
            <div style="flex: 2">
              <p>三甲快问-图文咨询</p>
              <p style="margin-top: 10px; font-size: 13px">
                公立三甲医生、
                <span style="font-size: 13px; color: #ff7e59">1小时不限次</span>
                快速交流
              </p>
            </div>
            <div style="flex: 0.5">
              <p style="color: #ff7e59">￥13.9</p>
              <del style="color: #acacac">￥29.9</del>
            </div>
            <div style="flex: 0.1; font-size: 12px">
              <van-radio name="1" @click="price = 13.9"></van-radio>
            </div>
          </div>
          <div
            style="
              margin: 0 10px;
              padding: 0 10px;
              height: 80px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #eeeeee;
            "
          >
            <div style="flex: 2">
              <p>特惠快问-图文咨询</p>
              <p style="margin-top: 10px; font-size: 13px">
                公立医院医生、
                <span style="font-size: 13px; color: #ff7e59">1小时不限次</span>
                快速交流
              </p>
            </div>
            <div style="flex: 0.5">
              <p style="color: #ff7e59">￥9.9</p>
              <del style="color: #acacac">￥19.9</del>
            </div>
            <div style="flex: 0.1; font-size: 12px">
              <van-radio name="2" @click="price = 9.9"></van-radio>
            </div>
          </div>
          <div
            style="
              margin: 0 10px;
              padding: 0 10px;
              height: 80px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #eeeeee;
            "
          >
            <div style="flex: 2">
              <p>三甲畅聊-图文咨询</p>
              <p style="margin-top: 10px; font-size: 13px">
                公立三甲医生、
                <span style="font-size: 13px; color: #ff7e59">24小时不限次</span>
                快速交流
              </p>
            </div>
            <div style="flex: 0.5">
              <p style="color: #ff7e59">￥19.9</p>
              <del style="color: #acacac">￥39.9</del>
            </div>
            <div style="flex: 0.1; font-size: 12px">
              <van-radio name="3" @click="price = 19.9"></van-radio>
            </div>
          </div>
        </van-radio-group>
        <!-- 医生 -->
        <div style="margin: 10px; padding: 10px; border: 1px solid">
          <div>
            <p>
              您可同时选择
              <span style="color: #faab0d">多位医生</span>
              听取更多意见
            </p>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="bottom2Top">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item, index) in doctors" :key="index" class="bottom2Top">
              <div class="top-head-text" @click="Exdetalis(item)">
                <div class="top-head-zhi">
                  <img src="../../assets/img/知名.png" alt="" />
                  知名专家
                </div>
                <div class="head-text-tou">
                  <img :src="item.doctor_info.image" alt="" />
                  <p class="head-text-tou-pa">
                    <span class="head-text-tou-pa-name">{{ item.doctor_info.name }}</span>
                    |
                    <span>{{ item.doctor_info.title }}</span>
                    <span>{{ item.doctor_info.clinic_name }}</span>
                    <span class="head-text-tou-pa-ke">{{ item.doctor_info.new_tags[1].name }}</span>
                  </p>
                  <p clang="head-text-tou-pb">
                    <span>{{ item.doctor_info.hospital_name }}</span>
                    <span class="head-text-tou-pb-san">三甲</span>
                    <span class="head-text-tou-pb-bai">{{
                      item.doctor_info.new_tags[0].name
                    }}</span>
                  </p>
                </div>
                <div class="head-text-text">
                  <p>
                    {{ p }}
                  </p>
                </div>
                <div class="head-text-shu">
                  <span>
                    {{ item.doctor_info.good_rate }}
                    <van-icon name="star" color="#fdb206" />
                  </span>
                  <span>
                    {{ item.doctor_info.service_data_list[1].name }}
                    {{ item.doctor_info.reply_num }}
                  </span>
                  <span>
                    {{ item.doctor_info.service_data_list[2].name }}
                    {{ item.doctor_info.service_data_list[2].descrip }}
                  </span>
                </div>
                <div class="head-text-an">
                  <div v-for="(v, i) in item.doctor_info.service_list" :key="i">
                    <span>{{ v.service_type_verbose }}￥{{ v.price }}</span>
                  </div>
                  <!-- <div class="head-text-an-right">{{ item.doctor_info.ad_tag }}</div> -->
                </div>
                <div class="head-text-yixue">
                  <p>医学博士，上海市康复医学会泌尿盆底专业委员会委员</p>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
      底部按钮
      <div class="anniu" style="width: 100%; height: 50px">
        <van-button round block type="success" native-type="submit">
          去问诊(￥{{ price }})
        </van-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
// import { zhDebounce } from "../../api"
import { areaList } from '@vant/area-data'
import { getAllTypeEmojis } from './utils'
import { getSelectDocter } from '../../api/http'
import { showToast } from 'vant'

// websocket
const socketData = ref([])
const submitting = ref<boolean>(false)
// 定义文本框的值
const ipvalue = ref('')
// 定义websocket 地址
const wsUrl = 'ws:localhost:8082'
// 创建websocket实例
const ws = new WebSocket(wsUrl)
// ws.onmessage  消息接收
ws.onmessage = (e) => {
  // 将消息解析出来
  const res = JSON.parse(e.data)
  // 判断消息类型

  // 模拟延迟一秒  模拟提交中
  setTimeout(() => {
    // 设置提交状态伟true
    submitting.value = false
    // 将消息添加到评论列表
    socketData.value = [...socketData.value, { ...res }]
    ipvalue.value = ''
  }, 1000)
}
const handleSubmit = () => {
  if (!ipvalue.value) return (submitting.value = true)
  // 设置消息内容
  const obj = {
    type: 'person',
    contents: ipvalue.value,
    datetime: new Date().toLocaleString()
  }

  let mes = ipvalue.value
  if (mes.length < 10) {
    showToast('病情描述不可少于10个字')
  } else {
    socketData.value = [...socketData.value, { ...obj }]
    // 发送消息  将内容转化为json字符串发送给服务器
    ws.send(JSON.stringify(obj))
  }
  if (socketData.value.length >= 5) {
    currentStep.value = 1
    shows.value = true
    flag.value = false
  }
}
onMounted(() => {})
// 销毁时关闭websocket 连接
onUnmounted(() => {
  ws.close()
})

//弹框
const show5 = ref(false)
const popupKe = () => {
  show5.value = true
}
const value2 = ref('科室')
const date = ref([])
const num = ref(0)
const price = ref(0)
// 获取数据
const data = ref([])
const p = ref()
const doctors = ref([])
const getDoctor = () => {
  getSelectDocter().then((res) => {
    // console.log(res.data.doctors);
    // console.log(res.data.doctors[0].doctor_info.good_at);
    p.value = res.data.doctors[0].doctor_info.good_at.split('>')[1].split('<')[0]
    doctors.value = res.data.doctors
  })
}
getDoctor()
const keshi = (e) => {
  // console.log(e.text, '111')
  value2.value = e.text
  date.value = data.value.filter((item) => item.keshi == e.text)
  if (e.text == '全部疾病') {
    date.value = data.value
  }
  // console.log(date.value, 'date')
  show5.value = false
}

// 表情包
const show6 = ref(false)
const emojis = () => {
  show6.value = !show6.value
}
interface EmojiType {
  allEmojis?: EmojiItem
  defEmojis: EmojiItem
}
interface EmojiItem {
  name: string
  value: any[]
}

const emit = defineEmits(['emojiHandle'])
const props = defineProps({
  all: {
    type: Boolean,
    default: false
  }
})

const res = getAllTypeEmojis()
console.log(res)

const emojiObj = ref<EmojiType>({
  defEmojis: res.defEmojis
})

if (props.all) {
  emojiObj.value = res
} else {
  emojiObj.value = {
    defEmojis: res.defEmojis
  }
}
const emoji = reactive<{
  chooseItem: string
  historyList: string[]
  allEmoji: EmojiType
}>({
  chooseItem: '',
  historyList: [],
  allEmoji: emojiObj.value
})
const chooseEmojiDefault = (item: string) => {
  emoji.chooseItem = item
  ipvalue.value += item
  emit('emojiHandle', item)
  return item
}
// 上拉加载更多
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    num.value += 10
    getDoctor()

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (date.value.length >= 100) {
      finished.value = true
    }
  }, 1000)
}
const activeIndex = ref(0)
const items = [
  {
    text: '全部',
    children: [{ text: '全部疾病', id: 1 }]
  },
  {
    text: '内科',
    children: [
      { text: '呼吸内科', id: 2 },
      { text: '消化内科', id: 3 },
      { text: '神经内科', id: 4 },
      { text: '内分泌科', id: 5 },
      { text: '心血管内科', id: 6 },
      { text: '风湿免疫科', id: 7 },
      { text: '血液内科', id: 8 },
      { text: '肾内科', id: 9 },
      { text: '感染内科', id: 10 },
      { text: '老年病科', id: 11 },
      { text: '普通内科', id: 12 },
      { text: '高压氧科', id: 13 },
      { text: '过敏反应科', id: 14 }
    ]
  },
  {
    text: '外科',
    children: [
      { text: '普通外科', id: 15 },
      { text: '泌尿外科', id: 16 },
      { text: '胸外科', id: 17 },
      { text: '心血管外科', id: 18 },
      { text: '神经外科', id: 19 },
      { text: '胃肠外科', id: 20 },
      { text: '肝胆外科', id: 21 },
      { text: '肛肠外科', id: 22 },
      { text: '烧伤科', id: 23 },
      { text: '器官移植', id: 24 },
      { text: '血管外科', id: 25 },
      { text: '甲状腺外科', id: 26 },
      { text: '乳腺外科', id: 27 },
      { text: '介入医学科', id: 28 }
    ]
  },
  {
    text: '妇产科',
    children: [
      { text: '妇产科', id: 29 },
      { text: '产科', id: 30 },
      { text: '妇科', id: 31 },
      { text: '计划生育科', id: 32 },
      { text: '生殖医学科', id: 33 },
      { text: '遗传咨询科', id: 34 },
      { text: '妇科内分泌', id: 35 },
      { text: '妇科肿瘤', id: 36 },
      { text: '产前检查科', id: 37 }
    ]
  },
  {
    text: '儿科',
    children: [
      { text: '新生儿科', id: 38 },
      { text: '新生儿外科', id: 39 },
      { text: '小儿内科', id: 40 },
      { text: '小儿呼吸科', id: 41 },
      { text: '小儿消化科', id: 42 },
      { text: '小儿心内科', id: 43 },
      { text: '小儿肾内科', id: 44 },
      { text: '小儿神经内科', id: 45 },
      { text: '小儿泌尿外科', id: 46 },
      { text: '小儿血液科', id: 47 },
      { text: '小儿内分泌科', id: 48 },
      { text: '小儿风湿免疫科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿康复科', id: 51 },
      { text: '小儿皮肤科', id: 52 },
      { text: '小儿耳鼻喉科', id: 53 },
      { text: '小儿眼科', id: 54 },
      { text: '小儿口腔科', id: 55 },
      { text: '儿童保健科', id: 56 },
      { text: '小儿急救科', id: 57 }
    ]
  },
  {
    text: '眼科',
    children: [
      { text: '眼底科', id: 69 },
      { text: '白内障科', id: 70 },
      { text: '角膜科', id: 71 },
      { text: '青光眼科', id: 72 },
      { text: '眼外伤科', id: 73 },
      { text: '小儿眼科', id: 74 },
      { text: '眼视光学科', id: 75 },
      { text: '眼眶及眼肿瘤科', id: 76 },
      { text: '眼整形科', id: 77 }
    ]
  },
  {
    text: '口腔科',
    children: [
      { text: '口腔预防科', id: 78 },
      { text: '口腔正畸科', id: 79 },
      { text: '口腔修复科', id: 80 },
      { text: '口腔黏膜科', id: 81 },
      { text: '牙体牙植科', id: 82 },
      { text: '牙周科', id: 83 },
      { text: '种植科', id: 84 },
      { text: '颌面外科', id: 86 },
      { text: '儿童口腔科', id: 87 }
    ]
  },
  {
    text: '耳鼻咽喉头颈科',
    children: [
      { text: '耳鼻喉科', id: 88 },
      { text: '头颈外科', id: 89 },
      { text: '耳科', id: 90 },
      { text: '鼻科', id: 91 },
      { text: '喉科', id: 92 }
    ]
  },
  {
    text: '肿瘤科',
    children: [
      { text: '肿瘤内科', id: 93 },
      { text: '肿瘤外科', id: 94 },
      { text: '放疗科', id: 95 }
    ]
  },
  {
    text: '皮肤性病科',
    children: [
      { text: '皮肤科', id: 96 },
      { text: '性病科', id: 97 }
    ]
  },
  {
    text: '中医科',
    chil: [
      { text: '中医科', id: 98 },
      { text: '中医妇产科', id: 99 },
      { text: '中医儿科', id: 100 },
      { text: '中医内分泌科', id: 101 },
      { text: '中医消化科', id: 102 },
      { text: '中医呼吸科', id: 103 },
      { text: '中医肾病科', id: 104 },
      { text: '中医免疫内科', id: 105 },
      { text: '中医心内科', id: 106 },
      { text: '中医血液科', id: 107 },
      { text: '中医神经内科', id: 108 },
      { text: '中医肝病科', id: 109 },
      { text: '中医感染内科', id: 110 },
      { text: '中医肿瘤科', id: 111 },
      { text: '中医皮肤科', id: 112 },
      { text: '中医男科', id: 113 },
      { text: '中医外科', id: 114 },
      { text: '中医骨科', id: 115 },
      { text: '中医乳腺外科', id: 116 },
      { text: '中医肛肠科', id: 117 },
      { text: '中医精神科', id: 118 },
      { text: '中医眼科', id: 119 },
      { text: '中医耳鼻咽喉科', id: 120 },
      { text: '中医按摩科', id: 121 },
      { text: '针灸科', id: 122 }
    ]
  },
  {
    text: '骨伤科',
    children: [{ texxt: '骨伤科', id: 123 }]
  },
  {
    text: '精神心理科',
    children: [
      { text: '全部精神心理科', id: 124 },
      { text: '精神科', id: 125 },
      { text: '心理科', id: 126 }
    ]
  },
  {
    text: '全科',
    children: [{ text: '全科医学科', id: 127 }]
  },
  {
    text: '口腔颌面科',
    children: [{ text: '全部口腔颌面科', id: 128 }]
  }
]

const checked = ref('0')

const flag = ref(true)
const steps = ref([
  { title: '描述病情' },
  { title: '发送图片' },
  { title: '选择就诊人' },
  { title: '匹配医生' }
])
//box
const box = ref(true)
//切换顶部样式
const currentStep = ref(0)
const messages1 = ref([])

const onClickLeft = () => history.back()

//弹出框(上传图片)
const show = ref(false)
const showPopup = () => {
  show.value = true
}
//确定
const goUpload = () => {
  show.value = false
  show1.value = true
  currentStep.value = 2
  const url = ref([])
  fileList.value.forEach((item) => {
    messages1.value.push(item.content)
  })
  console.log(url.value)
  console.log(messages1.value)
}
//(暂时没有)
const show1 = ref(false)
const showPopup1 = () => {
  show1.value = true
  currentStep.value = 2
}
//上传图片
const fileList = ref([])

const show2 = ref(false)
const showPopup2 = () => {
  show2.value = true
}
const onClickLeft1 = () => {
  show1.value = true
  show2.value = false
}
//
const formData = reactive({
  username: '',
  guanxi: '',
  checked: '1',
  nyr: ''
})
const yincang = ref(true)
//确定
const onSubmit = () => {
  currentStep.value = 3
  box.value = false
  show2.value = false
  show1.value = false
  yincang.value = false
}
//日期选择
//现在时间
const newDate = ref([])
const currentDate = ref(['2001', '03', '16'])
// 弹出日期
const show3 = ref(false)
const riqi = () => {
  show3.value = true
}
//取消事件
const no = () => {
  show3.value = false
}
//确定获取时间
const getSelectedDate = ref()
const yes = () => {
  formData.nyr = getSelectedDate.value.modelValue
  show3.value = false
}
// 患处显示
const shows = ref(false)
</script>

<style scoped lang="scss">

// body {
//   overflow: hidden;
// }
.box {
  width: 375px;
  height: 100%;
}

.box1 {
  width: 100%;
  height: 100%;
  // border: 1px solid #1fd712;

  .anniu {
    position: fixed;
    // z-index: 888;
    bottom: 0px;
  }
}

//暂时没有
.popupZan {
  margin: 0.625rem;

  h4 {
    margin-bottom: 0.625rem;
  }

  .xin {
    margin-top: 1.25rem;

    > p {
      width: 6.25rem;
      height: 3.75rem;
      border: 0.0625rem dashed #37ce69;
      color: #37ce69;
      text-align: center;
      line-height: 3.75rem;
    }
  }
}

//上传文件
.popupShang {
  margin: 1.25rem;

  p {
    font-size: 0.875rem;
  }
}

.describe {
  width: 100%;

  ul {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {
      width: 6.25rem;
      height: 2.4rem;
      background: #ccc;
      line-height: 2.4rem;
      text-align: center;
    }

    .active {
      background: #30d177;
      color: #fff;
    }
  }
}

.bu {
  width: 96%;
  margin: 0.4rem auto;

  height: 5.25rem;

  img {
    width: 100%;
    height: 100%;

    border-radius: 0.6rem;
  }
}

.chat {
  width: 94%;
  height: calc(100% - 6.25rem - 15%);
  display: flex;
  margin: 1.5rem auto;
  flex-direction: column;
  // margin-top: 1.5rem;
}

.left {
  width: 23.4375rem;
  height: 100%;
}

// 左侧机器人
.zuo {
  width: 100%;
  height: 50%;
  display: flex;

  // background: red;
}

.zuo p {
  background-color: #fff;
  border-radius: 0.5rem;
  margin-top: 0.3125rem;
  font-size: 1.13rem;
  width: 300px;
  text-indent: 2em;
}

.zuo img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-top: 0.3125rem;
}
.robot {
  width: 100%;
  height: 7rem;
  margin-bottom: 2rem;
}
.helper {
  margin-left: 12px;

  span {
    color: #c2c2c2;
    font-size: 15px;
  }
}
// 第一人称

.person {
  margin-top: 5.5rem;
}
// 第一人称  p
.person p {
  width: 100%;
  background: #c6e5f9;
  margin-top: 2rem;
}
.you {
  display: flex;
  margin-top: 6.375rem;
  flex-direction: row-reverse;
  width: 100%;
}

.you p {
  background-color: #fff;
  border-radius: 0.3125rem;
}

.you img {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
}

.bottom1 {
  position: absolute;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 6.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom {
  position: absolute;
  bottom: 0.625rem;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  display: flex;
  height: 4.375rem;
  background: #fff;
  line-height: 4.375rem;

  input {
    width: 80%;
    height: 4.1rem;
    background: #f7f7f7;
    padding-left: 1.25rem;
    margin-left: 0.625rem;
    margin-top: 0.3125rem;
    font-size: 0.5rem;
    border: none;
  }

  button {
    width: 5rem;
    height: 2.5rem;
    background: #39d167;
    border-radius: 1.25rem;
    border: none;
    margin-left: 0.625rem;
    margin-top: 0.9375rem;
    line-height: 2.5rem;
    color: white;
    text-align: center;
  }
}

#chat-messages {
  height: 350px;
  /* 设置聊天窗口的高度，可根据实际需求调整 */
  overflow-y: auto;
  /* 当内容超出高度时，自动出现垂直滚动条 */
  scroll-behavior: smooth;
  /* 滚动效果平滑 */
}

.middle {
  width: 100%;
  height: 31.25rem;
  margin-bottom: 0;
  overflow: auto;

  // background: white;
  .top-head-text {
    position: relative;
    height: 15rem;
    width: 100%;
    background: #fff;
    padding: 1.25rem 0.625rem;
    // border-bottom: 1px solid #000;
    margin-bottom: 0.625rem;
    box-shadow: inset 0px 9px 5px #fff7ed;

    .top-head-zhi {
      position: absolute;
      height: 1.25rem;
      width: 80px;
      background: #ffe7c3;
      right: 0;
      top: 0;
      border-bottom-left-radius: 15px;
      color: #884d18;
      text-align: center;
      line-height: 20px;
      font-weight: bold;
      font-size: 15px;

      img {
        float: left;
        height: 8px;
        width: 10px;
        margin-left: 8px;
        margin-top: 5px;
      }
    }

    .head-text-tou {
      height: 50px;
      width: 100%;
      // background: red;
      font-size: 12px;

      // display: flex;
      img {
        height: 50px;
        width: 50px;
        float: left;
        border-radius: 50px;
      }

      p {
        line-height: 25px;

        span {
          padding-right: 3px;
        }
      }

      .head-text-tou-pa {
        font-size: 14px;
        display: inline-block;
      }

      .head-text-tou-pa-name {
        font-size: 17px;
        font-weight: 600;
        display: inline-block;
      }

      .head-text-tou-pa-ke {
        height: 25px;
        width: 60px;
        background: #f2f8fd;
        color: #a3caf1;
        font-size: 12px;
        display: inline-block;
        line-height: 25px;
      }

      .head-text-tou-pb-san {
        height: 30px;
        width: 60px;
        background: #1cc381;
        color: white;
        margin: 0 5px;
      }

      .head-text-tou-pb-bai {
        color: #f7e9d2;
        background-color: #884d18;
      }
    }

    .head-text-text {
      height: 50px;
      width: 100%;
      // background: orange;
      margin-top: 5px;
      overflow: auto;

      p {
        font-size: 12px;
        line-height: 20px;
      }
    }

    .head-text-shu {
      height: 20px;
      width: 100%;

      span {
        float: left;
        line-height: 20px;
        padding-right: 25px;
      }
    }

    .head-text-an {
      height: 50px;
      width: 100%;
      // background:orchid;
      // border-bottom: 1px solid #000;
      padding-top: 10px;

      span {
        float: left;
        height: 30px;
        width: 70px;
        border: 1px solid #39d167;
        color: #39d167;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
        font-size: 12px;
        font-weight: bold;
        margin-right: 10px;
      }

      .head-text-an-right {
        float: right;
        height: 20px;
        width: 70px;
        font-size: 10px;
        border: 1px solid #ff7751;
        color: #ff7751;
        border-radius: none;
        text-align: center;
        line-height: 20px;
        margin-top: 8px;
        font-weight: bold;
      }
    }

    .head-text-yixue {
      height: 20px;
      width: 100%;
      background: #f9f9f9;
      line-height: 20px;
    }
  }
}
.content {
  padding: 16px 16px 160px;
}
.default::-webkit-scrollbar {
  display: none;
}

.emoji {
  text-align: left;
  width: 100%;
  max-height: 100%;
  background: #fff;
  overflow-y: auto;

  p {
    font-size: 14px;
    padding: 1vh;
  }
  .default {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    li {
      display: inline-block;
      font-size: 20px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      overflow: hidden;
      cursor: pointer;
      text-align: center;
    }

    li:hover {
      background-color: #ececec;
    }
  }
}

@media screen and (max-width: 800px) {
  .emoji {
    width: 100%;
  }
}
.back {
  width: 100%;
  height: 2.875rem;
}
// 图片盒子

</style>